<template>
    <div class="hotShopList" v-if="homeshoplist.length>0">
        <ul class="shopList">
            <li class="shop-list-item" v-for="(shop,index) in homeshoplist" :key="index">
                <img :src="shop.image_url" alt="" width=100% >
                <h4 class="list-item-title">{{shop.goods_name}}</h4>
                <div class="list-item-bottom">
                    <span class="item-price">¥{{shop.normal_price/100}}</span>
                    <span class="item-counter">{{shop.sales_tip}}</span>
                    <span class="item-user">
                        <img :src="user.avatar" v-for="(user,index1) in shop.bubble" :key="index1" alt="" >
                    </span>
                    <span class="item-buy">
                        <button>去拼单 ></button>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import hotShopList from './hotShopList'
import { mapState } from 'vuex';
export default {
    name:"hotShopList",
    components:{
        hotShopList
    },
    computed: {
        ...mapState(['homeshoplist'])
    }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
   .hotShopList{
       margin-bottom 50px
       background-color #f5f5f5
   }

   .shopList li{
       margin-bottom 10px
       background #fff
       display flex
       flex-direction column
   }

   .list-item-title{
       line-height 22px
       width 94%
       margin-left 3%
       height 44px
       overflow hidden
   }

   .list-item-bottom{
       margin 10px 0
       display flex
       flex-direction row
       justify-content space-around
       align-items center
   }

   .list-item-bottom .item-price{
       font-size 18px
       text-align center
       font-weight bold
       color red
       flex 1
   }

   .list-item-bottom .item-counter{
       flex 2
       font-size 12px
       color #cccccc

   }

    .list-item-bottom .item-user{
        display flex
        align-items center
        justify-content center
        flex 1
    }
    
    .list-item-bottom .item-user img{
        width 40px
        border-radius 50%
    }

    .list-item-bottom .item-user img:nth-child(2){
        margin-left -10px
    }

    .item-buy{
        flex 2
    }

    .item-buy button{
        width 80%;
        border none 
        height 34px
        color #ffffff
        display flex
        justify-content center
        align-items center
        margin-left 10px
        background-color red
        border-radius 5px
        text-align center
    }    
</style>